<template>
	<view class="tn-steps-class tn-steps" :style="{
      flexDirection: direction
    }">
		<view v-for="(item, index) in list" class="mline" :key="index">

			<view class="tn-steps__item" :class="[`tn-steps__item--${direction}`]" @tap="clickStepItem(index)">
				<!-- 数值模式 -->
				<view v-if="mode === 'number'" class="tn-steps__item__number" :style="{
          backgroundColor:item.rate<=0 ? 'transparent' : activeColor,
          borderColor:item.rate<=0 ? inActiveColor : activeColor
        }">
					<text class="tn-steps__item__number__text tn-steps__item__number__text--visible"
						:style="{  activeColor }">
						{{ index + 1}}
					</text>
					<view class="tn-steps__item__number__icon"
						:class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]">
					</view>

				</view>

				<!-- 点模式 -->
				<view v-if="mode === 'dot'" class="tn-steps__item__dot" :style="{
          backgroundColor:item.rate<=0 ? inActiveColor : activeColor
        }"></view>

				<!-- 图标模式 -->
				<view v-if="mode === 'icon'" class="tn-steps__item__icon" :class="[iconModeClass(index)]" :style="{
          color:item.rate<=0 ? inActiveColor : activeColor
        }"></view>

				<!-- 点图标模式 -->
				<view v-if="mode === 'dotIcon'" class="tn-steps__item__dot-icon">
					<view v-if="currentIndex <= index" class="tn-steps__item__dot-icon--dot"
						:style="{backgroundColor: inActiveColor}"></view>
					<view v-else class="tn-steps__item__dot-icon--icon" :class="[iconModeClass(index)]"
						:style="{color: activeColor}"></view>
				</view>

				<view  v-if="showTitle" class="tn-steps__item__text tn-text-ellipsis"
					:class="[`tn-steps__item__text--${direction}`]" :style="{
						  color: item.rate<=0 ? inActiveColor : activeColor
						}">
					<!-- 步骤下的文字 -->
					<view >
						工序：{{ item.name ||item['工序名称']  }} 
					</view>
					<view >
						部件：{{ item['部件名称']  }}
					</view>
				</view>
			
				
				
				<!-- 连接的横线 -->
				<view v-if="index < list.length - 1" class="tn-steps__item__line"
					:class="[`tn-steps__item__line--${mode}`]" :style="{
				  borderColor: item.rate<=0 ? inActiveColor : activeColor
				}"></view>


			</view>
			<view class="">
				<tn-line-progress class="pro" :percent="item.rate" activeColor="#01BEFF" :showPercent="true"></tn-line-progress>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'tn-steps',
		props: {
			// 模式类型
			// dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标
			mode: {
				type: String,
				default: 'dot'
			},
			// 步骤条的方向
			// row -> 横向 column -> 竖向
			direction: {
				type: String,
				default: 'row'
			},
			// 步骤条数据
			list: {
				type: Array,
				default () {
					return []
				}
			},
			// 当前激活的步数
			current: {
				type: Number,
				default: 0
			},
			// 激活步骤的颜色
			activeColor: {
				type: String,
				default: '#2074d4'
			},
			// 未激活步骤的颜色
			inActiveColor: {
				type: String,
				default: '#AAAAAA'
			},
			// 激活后显示的图标，在数字模式下有效
			icon: {
				type: String,
				default: 'success'
			},
			// 是否显示标题
			showTitle: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			// icon模式下图标的值
			iconModeClass() {
				return (index) => {
					const item = this.list[index]
					// 状态被选中并且对应数据下存在selectIcon属性
					if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {
						return `tn-icon-${item.selectIcon}`
					} else {
						// 未选中
						return `tn-icon-${item.icon || this.icon}`
					}
				}
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		watch: {
			current: {
				handler(val) {
					this.currentIndex = val
				},
				immediate: true
			}
		},
		methods: {
			// 点击了某一个选项
			clickStepItem(index) {
				const chooseIndex = index + 1
				this.currentIndex = chooseIndex
				this.$emit('click', {
					index: chooseIndex
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$tn-steps-item-number-width: 44rpx;
	$tn-steps-item-dot-width: 20rpx;

	.tn-steps {
		display: flex;
		flex-direction: row;

		&__item {
			flex: 1;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			min-width: 100rpx;
			font-size: 28rpx;
			text-align: center;

			&__number {
				// display: flex;
				// flex-wrap: wrap;
				// align-items: center;
				// justify-content: center;
				position: relative;
				width: $tn-steps-item-number-width;
				height: $tn-steps-item-number-width;
				line-height: calc(#{$tn-steps-item-number-width} - 2rpx);
				border: 1px solid #AAAAAA;
				border-radius: 50%;
				overflow: hidden;
				transition: all 0.3s linear;

				&__text {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					transition: inherit;
					transform: translateY(-#{$tn-steps-item-number-width});

					&--visible {
						transform: translateY(0);
					}
				}

				&__icon {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					color: #FFFFFF;
					transition: all 0.3s linear;
					transform: translateY(#{$tn-steps-item-number-width});

					&--visible {
						transform: translateY(0);
					}
				}
			}

			&__dot {
				width: $tn-steps-item-dot-width;
				height: $tn-steps-item-dot-width;
				display: flex;
				flex-direction: row;
				border-radius: 50%;
				transition: all 0.3s linear;

				&--icon {
					width: $tn-steps-item-number-width;
					height: $tn-steps-item-number-width;
				}
			}

			&__icon {
				width: $tn-steps-item-number-width;
				height: $tn-steps-item-number-width;
				font-size: $tn-steps-item-number-width;
				transition: all 0.3s linear;
			}

			&__dot-icon {
				width: $tn-steps-item-number-width;
				height: $tn-steps-item-number-width;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				transition: all 0.3s linear;

				&--dot {
					width: $tn-steps-item-dot-width;
					height: $tn-steps-item-dot-width;
					border-radius: 50%;
					transition: inherit;
				}

				&--icon {
					width: $tn-steps-item-number-width;
					height: $tn-steps-item-number-width;
					font-size: $tn-steps-item-number-width;
					transition: inherit;
				}
			}

			&__text {
				transition: all 0.3s linear;
				max-width: 200px;
				&--row {
					margin-top: 14rpx;
				}

				&--column {
					margin-left: 14rpx;
					margin-top: 140upx;
					    text-align: left;
				}
			}

			&__line {
				position: absolute;
				z-index: 0;
				vertical-align: middle;
				transition: all 0.3s linear;
			}

			&--row {
				display: flex;
				flex-direction: column;

				.tn-steps__item__line {
					border-bottom-width: 1px;
					border-bottom-style: solid;
					width: 50%;
					left: 75%;

					&--dot {
						top: calc(#{$tn-steps-item-dot-width} / 2);
					}

					&--number,
					&--icon,
					&--dotIcon {
						top: calc(#{$tn-steps-item-number-width} / 2);
					}
				}
			}

			&--column {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				min-height: 200rpx;

				.tn-steps__item__line {
					border-left-width: 1px;
					border-left-style: solid;
					height: 50%;
					top: 75%;

					&--dot {
						left: calc(#{$tn-steps-item-dot-width} / 2);
					}

					&--number,
					&--icon,
					&--dotIcon {
						left: calc(#{$tn-steps-item-number-width} / 2);
					}
				}
			}
		}
	}

	.pro {
		top: 88upx;
		width: 80%;
		left: 25px;
		position: absolute;
	}

	.mline {
		position: relative;
	}
</style>